<template>

  <div>
    <el-row class="table-title" type="flex" justify="space-between" align="middle">
      <slot name="title">
        {{ title }}
      </slot>
    </el-row>
    <el-row type="flex" justify="space-between" align="middle">
      <span class="operate-button">
        <table-button  icon="el-icon-video-play" type="primary"
                       :content="syncTip" @click="sync"/>

        <slot name="button"></slot>
      </span>
    </el-row>
  </div>

</template>

<script>
import TableSearchBar from '../../common/components/TableSearchBar';
import TableButton from '../../common/components/TableButton';
import TableAdvSearchBar from "../../common/components/search/TableAdvSearchBar";

export default {
  name: "TableHeader",
  components: {TableAdvSearchBar, TableSearchBar, TableButton},
  props: {
    title: {
      type: String,
      default() {
        return this.$t('resource.search_by_hummerid');
      }
    },
    showSync: {
      type: Boolean,
      default: false
    },
    condition: {
      type: Object
    },
    syncTip: {
      type: String
    },
    tip: {
      String,
      default() {
        return this.$t('resource.search_by_hummerid');
      }
    }
  },
  methods: {
    search(value) {
      this.$emit('update:condition', this.condition);
      this.$emit('search', value);
    },
    sync() {
      this.$emit('sync');
    },
  },
  computed: {
    isCombine() {
      return this.condition.components !== undefined && this.condition.components.length > 0;
    }
  }
}
</script>

<style>

.table-title {
  height: 40px;
  font-weight: bold;
  font-size: 18px;
}

</style>

<style scoped>

.operate-button {
  margin-bottom: -5px;
}

.search-bar {
  width: 200px
}

</style>
